<template>
  <div class="box">
    <div class="title">忠讯应用商城</div>
    <div class="btn">
      <div class="font">
        您的服务将于2019-12-01到期
      </div>
      <div class="btn-b">立即续费</div>
    </div>
    <ul class="news">
      <div class="tit">产品动态</div>
      <li
        v-for="(item, index) in xwArr"
        :key="index"
        :style="index == idx ? 'color:#ff5b5b;' : 'color: #666666;'"
        @mouseover="over(index)"
        @mouseout="out"
      >
        <span>{{ item.content }}</span>
        <span>{{ item.time }}</span>
      </li>
    </ul>
    <div class="news" style="margin-top:20px;">
      <div class="tit">联系客服</div>
      <div class="imgs">
        <img
          src="https://oss.ztwlxx.cn/%E5%BE%AE%E4%BF%A1%E5%AE%A2%E6%9C%8D.png"
          width="88px"
          height="88px"
        />
      </div>
      <div class="font">
        官方电话：400-038-5581
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "",
      contact_way: "",
      value: "phone",
      placeholder: "请输入电话号码",
      idx: -1,
      xwArr: [
        {
          content: "关于商城存储设备的公告",
          time: "2019/9/11"
        },
        {
          content: "关于商城存储设备的公告",
          time: "2019/9/11"
        },
        {
          content: "关于商城存储设备的公告",
          time: "2019/9/11"
        },
        {
          content: "关于商城存储设备的公告",
          time: "2019/9/11"
        }
      ]
    };
  },
  watch: {
    value(val) {
      if (val === "phone") {
        this.placeholder = "请输入电话号码";
      } else if (val === "email") {
        this.placeholder = "请输入邮箱地址";
      }
    }
  },
  methods: {
    onClick() {
      const parmas = {
        tel: this.contact_way,
        type: this.value === "phone" ? 1 : 2,
        message: this.message,
        table: "message",
        _token: this.$store.state._token
      };
      this.$store.dispatch("feedback", parmas).then(res => {
        const { code, message } = res.data;

        if (~~code) {
          this.$message({ message: "意见反馈成功", type: "success" });
        } else {
          this.$message.error(message);
        }
      });
    },
    over(i) {
      this.idx = i;
    },
    out() {
      this.idx = -1;
    }
  }
};
</script>
<style lang="scss" scoped>
.box {
  background: #fff;
  height: 582px;
  text-align: center;
  margin-left: 16px;
  .title {
    width: 100%;
    height: 62px;
    line-height: 62px;
    font-family: PingFangSC-Medium;
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    text-align: center;
  }
  .btn {
    width: 100%;
    height: 110px;
    background: #ff5b5b;
    padding-top: 12px;
    margin-bottom: 20px;
    box-sizing: border-box;
    .font {
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #ffffff;
      text-align: center;
      margin-bottom: 20px;
    }
    .btn-b {
      width: 100px;
      height: 34px;
      line-height: 34px;
      text-align: center;
      font-size: 14px;
      color: #ff5b5b;
      background-color: #fff;
      margin: 0 auto;
      cursor: pointer;
    }
  }
  .news {
    padding: 0 10px;
    .tit {
      font-size: 14px;
      font-weight: bold;
      text-align: left;
    }
    li {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      cursor: pointer;
      span {
        font-size: 12px;
      }
    }
    .imgs {
      width: 100%;
      height: 140px;
      padding: 26px 0;
      box-sizing: border-box;
    }
    .font {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #333333;
    }
  }
}
</style>
